<template>
    <div class="container">
        <Header :left="true" title="门店详情"></Header>

        <div class="box" style="display:flex;">
            <div class="status-item">
                <div class="status-num">{{detail.orderNum}}</div>
                订单数
            </div>
            <div class="status-item">
                <div class="status-num">{{detail.orderApplyNum}}</div>
                待审核
            </div>
            <div class="status-item">
                <div class="status-num">{{detail.orderDoingNum}}</div>
                租赁中
            </div>
            <div class="status-item">
                <div class="status-num">{{detail.orderDoneNum}}</div>
                已完成
            </div>
        </div>

        <div class="box" style="margin-top:10px;">
            
            <div class="box-item">
                <div class="box-left">门店名称</div>
                &nbsp;{{detail.shopName}}
            </div>

            <div class="box-item">
                <div class="box-left">负责人姓名</div>
                &nbsp;{{detail.shopPrincipalName}}
            </div>

            <div class="box-item">
                <div class="box-left">负责人手机</div>
                &nbsp;{{detail.shopPrincipalPhone}}
            </div>

            <div class="box-item">
                <div class="box-left">转账账户名</div>
                &nbsp;{{detail.alipayTrueName}}
            </div>

            <div class="box-item">
                <div class="box-left">银行卡支行</div>
                &nbsp;{{detail.bankBranch}}
            </div>

            <div class="box-item">
                <div class="box-left">转账账户</div>
                <div class="box-right">
                    &nbsp;{{detail.alipayAccount}}
                </div>
            </div>

            <div class="box-item">
                <div class="box-left">地区</div>
                <div class="box-right">
                   &nbsp;{{detail.provinceName + detail.cityName + detail.countyName}}
                </div>
            </div>

            <div class="box-item">
                <div class="box-left">详细地址</div>
                <div class="box-right">
                    &nbsp;{{detail.detailAddress}}
                </div>
            </div>

            <div class="box-item">
                <div class="box-left">门店类型</div>
                <div class="box-right">
                    {{detail.type == 1 ? '线上' : '线下'}}
                </div>
            </div>

            <div class="box-item">
                <div class="box-left">状态</div>
                <div class="box-right">
                    {{detail.status == 1 ? '正常' : '禁用'}}
                </div>
            </div>

            <div class="box-item">
                <div class="box-left">添加时间</div>
                <div class="box-right">
                    {{fDate(null,null,detail.createDate)}}
                </div>
            </div>
            <div class="box-item" style="text-align:center;padding-left:10px;" >
                <div style="padding:10px 0;" >营业执照</div>
                <div>
                    <img style="width:100%;" :src="detail.licenseUrl" />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Header from '../../common/Header.vue'; 
export default {
    components:{Header},
    data:function(){
        return {
            loading:false,
            detail:{}
        };
    },
    created:function(){

        this.loadData();
    },
    methods:{
        loadData(){
            var that = this;
            that.loading = true;
            that.$api.post('/channel/channelShop/findById.json',{id:that.$route.params.id}).then(data =>{
                that.loading = false;
                if(data.data.code != '0'){
                    that.$message.error(data.data.msg);
                    return;
                }
                that.detail = data.data.data;
            }).catch(()=>{
                that.loading = false;
            });
        }
    }
}
</script>
<style scoped>
    .container{
        width: 100%;min-height: 100%;
        background: #F2F6FC;
        padding:10px;
    }
    .next-btn{text-align:center;margin-top: 20px;color: #409EFF;}
    .box{
        width: 100%;
        position: relative;
        padding: 10px;
        background: #fff;
        border-radius: 10px;
    }
    .box .status-item{
        flex: 1;
        padding: 10px;
        text-align: center;
        color: #606266;
    }
    .box .status-num{
        font-size: 28px;
        color: #333;
    }
    .box .box-item{
        padding: 15px 5px 15px 100px;
        border-bottom: 1px solid #E4E7ED;
        position: relative;
        color: #606266;
        text-align: right;
    }
    .box .box-item:last-child{
        border-bottom: none;
    }
    .box .box-item .box-left{
        position: absolute;
        top:15px;bottom: 0;
        margin: auto;
        left: 10px;
        color:#606266;
    }
</style>
